
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      #sexyline { 
          margin: 25px 0;
          height: 1px;
          background: #eeeee;
          background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, grey));
      }​
      div.thumbnail {
          display: block;
          position: relative;
      }
      div.thumbnail:hover .overlay {
          position: absolute;
          z-index: 3;
          width: 290px;
          height: 160px;
      }
      
      div.thumbnail .overlay .overlaycaption {
          text-align: center;
          position: absolute;
          height: 30px;
          line-height: 30px;
          width: 100%;
          z-index: 3;
          text-indent: -9999em;
          font-size: 11px;
          bottom: 0;
          overflow: hidden;
      }
      
      div.thumbnail:hover .overlaycaption {
          text-indent: 10px;
          background: rgb(255,255,255);
          /* for browsers that know rgba */
          background: rgba(255, 255, 255, 0.75);
      }
      
      div.thumbnail img { 
          display: block;
      }
      div.smallskip {
      	height: 10px;
      }
      ​
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">drop.in</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit" style="padding: 10px 10px 10px 10px;">
        <div>
        <div style="float: right; text-align: right;">
        <span>Free Guest Spots:<h1>4/5</h1></span>
        </div>
        <h2>Event Title</h2>
        <p>hosted by Francesco Anderloni - Type: Party, Entertainment</p>
        </div>
      </div>
      <div class="row">
        <div class="span4">
   		<ul class="thumbnails">
   		  <li class="span4">
   		    <div class="thumbnail">
   		      <span class="overlay">
   		      	<a href="#" class="overlaycaption">Change flyer</a>
   		      </span>
   		      <img src="http://placehold.it/290x290&text=Profile+Pic" alt="" width="290" height="402">
   		    </div>
   		    <div style="padding-left: 5px; padding-top: 10px;">
   		    <h4>Stats:</h4><br />
   		    <p>Average Host Rating:</p>
   		    <p>Average Guest Rating:</p>
   		    <p>On drop.in since:</p>   		    
   		    <p>Last Seen:</p>
   		    </div>
   		  </li>
   		</ul>
        </div>
        <div class="span8">
            <h3>Event Details:</h3>
              <p><strong>This event will be hold at:</strong></p>
              <p>DEI - Dipartimento di Ingegneria dell'informazione</p>
              <span>Via Gradenigo, 6/A - Padova - Veneto - Italy </span><span>Look it up on GMaps</span><div class="smallskip"></div>
              <p>on 2012-08-28; the event will start at 9.30 and finish at 11.30.</p>
			  <p><strong>Event Description:</strong></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non lorem fringilla libero fermentum commodo. Ut ante eros, mattis eu vulputate porttitor, dignissim et risus. Curabitur ac magna pellentesque leo tincidunt faucibus. Nam fermentum sem nec orci gravida vel consectetur eros tristique. Vivamus neque purus, vehicula ac pellentesque vel, eleifend non erat. Praesent euismod ligula sed turpis pulvinar sit amet sodales ante malesuada. Etiam pellentesque, leo eu lacinia tempus, orci augue aliquam nisl, vitae mattis tortor dui vel ante. Mauris egestas elit sit amet leo varius pellentesque. Praesent eleifend tincidunt lectus lobortis dictum. Nulla congue odio vitae diam pulvinar sed rutrum turpis venenatis. Sed dignissim, lorem quis vehicula aliquet, ipsum orci egestas enim, semper tristique sapien erat ut nunc.</p>
              <a href="/sendmessage" class="btn btn-primary" style="margin-left: auto; margin-right: auto;">Do you want to attend this event? Drop In!</a>
              
            <div id="sexyline"></div>
            <h3>Comments on this event:</h3>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
                <small>Someone famous</small>
              </blockquote>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
                <small>Someone famous</small>
              </blockquote>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
                <small>Someone famous</small>
              </blockquote>
            <a href="/sendmessage" class="btn" style="margin-left: auto; margin-right: auto;">Leave a comment</a>
	  </div>
	  </div>
	  </div>
      <footer>
        <p style="text-align: center; margin-top: 50px; color: grey;">&copy; PiP 2012</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

  </body>
</html>
